<template>
  <view>
    <nav-custom :showSearch="false"></nav-custom>
    <!-- 地图 -->
    <view class="cont">
      <map class="map" scale="9" latitude="28.600546" longitude="115.81823" :polygons="polygons"></map>
      <!-- 表单 -->
      <form @submit="handleSubmit">
        <view class="cu-form-group">
          <view class="title">
            <u-icon name="account"></u-icon>
            <text class="margin-left-10">姓名</text>
          </view>
          <input name="username" v-model="addresInfo.username" class="text-right" placeholder="请输入姓名"></input>
        </view>
        <view class="cu-form-group">
          <view class="title">
            <u-icon name="phone"></u-icon>
            <text class="margin-left-10">电话</text>
          </view>
          <input name="phone" v-model="addresInfo.phone" class="text-right" placeholder="请输入电话">
        </view>
        <view class="cu-form-group">
          <view class="title">
            <u-icon name="map"></u-icon>
            <text class="margin-left-10">南昌市</text>
          </view>
          <picker :range="regionArr" @change="handleRegion" class="pickerBox">
            <view class="picker">
              {{regionIdx==-1?'请选择区域':regionArr[regionIdx]}}
            </view>
          </picker>
        </view>
        <view class="cu-form-group" v-show="!(regionIdx==-1)">
          <view class="title">
            <u-icon name="car"></u-icon>
            <text class="margin-left-10">详细地址</text>
          </view>
          <input name="detail" v-model="addresInfo.detail" class="text-right" placeholder="请输入详细地址" />
        </view>
        <!-- <view class="check-defalt" @click="handleDefault">
          <text :class="['iconfont','icon-gouxuan',isCheck ? 'color-ffe':'']"></text>
          <text class="f16 margin-left-6">设为默认地址</text>
        </view> -->
        <view class="btnbox">
          <button form-type="submit" class="btn cu-btn block">
            保存并使用
          </button>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  import address from '../../store/address'
  export default {
    data() {
      return {
        regionArr: [
          '东湖区',
          '西湖区',
          '青山谱区',
          '青山区',
          '新建区',
          '红谷滩区',
          '南昌县',
          '安义县',
          '进贤县'
        ],
        regionIdx: -1,
        isCheck: false,
        addresInfo: {
          username: '',
          phone: '',
          region: '',
          detail: '',
          isdefault: false
        },
        objectId: '',
        timer: null,
        polygons: [],
        // circles: [{
        //         latitude: 28.600546,
        //         longitude: 115.888146,
        //         radius: 15000,
        //         strokeWidth: 2,
        //         color: '#1791fc',
        //         fillColor: '#1791fc'
        //     },
        // ]
      }
    },
    onLoad(opt) {
      this.getAddressInfo(opt.idx)
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
        addressList: state => state.address.addressList,
      })
    },
    methods: {
      ...mapActions("address", ['addressAddAct', 'updateAddressAct']),
      async getAddressInfo(objId) {
        //获取配送范围
        let res = await this.$H.get('/1.1/classes/map')
              const {
                deliveryRange
              } = res.data.results[0]
              const points = deliveryRange.map(point => {
                return {
                  longitude:point[0],
                   latitude:point[1],
                }
              })
              console.log('==== deliveryRange :', res, points);
              this.polygons = [{
                points:points,
                strokeWidth: 3,
                strokeColor: '#1791fc',
                zIndex: 11
            }
        ];
        if (objId !== 'undefined') {
          this.objectId = objId
          //***对象获取通过objectId,而不是where查询
          this.$H.get(`/1.1/classes/address/${objId}`).then((res) => {
            this.addresInfo = res.data
            this.isCheck = this.addresInfo.isdefault
            this.regionArr.forEach((item, index) => {
              if (this.addresInfo.region === item) this.regionIdx = index
            })
          })
        }
      },
      // backDetail() {
      //   uni.navigateBack({
      //     delta: 1
      //   })
      // },
      handleRegion(ev) {
        let {
          value
        } = ev.detail
        this.regionIdx = value
      },
      handleSubmit(ev) {
        if (ev.detail.value.detail) {
          //***为什么结果已经有了以下属性
          console.log('保存地址', ev);
          let {
            value
          } = ev.detail
          let {
            regionArr,
            regionIdx
          } = this
          value.city = '南昌市'
          value.region = regionArr[regionIdx]
          value.isdefault = false
          value.userid = this.userInfo.objectId
          if (this.timer) clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.objectId ? this.updateAddressAct({
              id: this.objectId,
              val: value
            }) : this.addressAddAct(value)
          }, 500)
          uni.navigateBack({
            delta: 1
          })
        } else {
          uni.showToast({ // 数据为空，提示用户
            title: '请输入地址信息',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* ==================
         表单
 ==================== */

  .cu-form-group {
    background-color: #ffffff;
    padding: 1upx 30upx;
    display: flex;
    align-items: center;
    min-height: 100upx;
    justify-content: space-between;
    // ***没效果
    // &:last-child {
    //   margin-bottom: 30rpx !important;
    // }
  }

  .cu-form-group+.cu-form-group {
    border-top: 1upx solid #eee;
  }

  .cu-form-group .title {
    text-align: justify;
    padding-right: 30upx;
    font-size: 30upx;
    position: relative;
    height: 60upx;
    line-height: 60upx;
    display: flex;
  }

  .cu-form-group input {
    flex: 1;
    font-size: 30upx;
    color: #555;
    padding-right: 20upx;
  }

  .cu-form-group>text[class*="cuIcon-"] {
    font-size: 36upx;
    padding: 0;
    box-sizing: border-box;
  }

  .cu-form-group textarea {
    margin: 32upx 0 30upx;
    height: 4.6em;
    width: 100%;
    line-height: 1.2em;
    flex: 1;
    font-size: 28upx;
    padding: 0;
  }

  .cu-form-group.align-start .title {
    height: 1em;
    margin-top: 32upx;
    line-height: 1em;
  }

  .cu-form-group picker {
    flex: 1;
    padding-right: 40upx;
    overflow: hidden;
    position: relative;
    // display: flex;
  }

  .cu-form-group picker .picker {
    line-height: 100upx;
    font-size: 28upx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: right;
  }

  // .cu-form-group picker::after {
  // 	font-family: cuIcon;
  // 	display: block;
  // 	content: "\e6a3";
  // 	position: absolute;
  // 	font-size: 34upx;
  // 	color: #8799a3;
  // 	line-height: 100upx;
  // 	width: 60upx;
  // 	text-align: center;
  // 	top: 0;
  // 	bottom: 0;
  // 	right: -20upx;
  // 	margin: auto;
  // }

  .cu-form-group textarea[disabled],
  .cu-form-group textarea[disabled] .placeholder {
    color: transparent;
  }
</style>

<style lang="scss">
  page {
    background-color: white;
  }

  // .check-defalt {
  //   margin-top: 30rpx;
  // }

  .text-right {
    text-align: right;
  }

  .map {
    width: 100%;
    height: 600rpx;
  }

  .btnbox {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* #ifdef MP-WEIXIN */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;

    /* #endif */
    .btn {
      background-color: #ffe32a;
      height: 100rpx;
      font-size: 40rpx;
      color: #000;
    }
  }
</style>
